<template>
  <div>
    <nav-bar
      :title="title"
      :isShow="false"
      :leftArrow="false"
      leftText=""
    ></nav-bar>
    <div class="img_outer">
      <van-image width="100%" height="200" :src="client_img" />
      <div style="color: yellow; position: absolute; top: 4px; left: 4px">
        卡号: {{ user.card_num }}
      </div>
    </div>
    <my-point :is_link="true"></my-point>

    <van-cell
      title="积分明细"
      is-link
      value="积分赠送与消费情况"
      :to="{ name: 'ClientPoints' }"
    />
    <van-cell
      title="个人信息"
      is-link
      value="完善个人信息"
      :to="{ name: 'ClientInfo' }"
    />
  </div>
</template>

<script>
import NavBar from "@/components/NavBar";
import MyPoint from "@/components/MyPoint";
import { getWeChatUser } from "@/api/wechat";
import client from "@/assets/images/client.png";

export default {
  name: "Client",
  components: {
    NavBar,
    MyPoint,
  },
  props: {},
  data() {
    return {
      title: this.$route.meta.title,
      client_img: client,
      user: {},
    };
  },
  computed: {},
  mounted() {
    this.getWeChatUserByOpenid();
  },
  methods: {
    getWeChatUserByOpenid() {
      const openid = localStorage.getItem("openid");
      getWeChatUser(openid)
        .then((res) => {
          this.user = res.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style  scoped>
.img_outer {
  position: relative;
  margin: 0px;
}
.img_header {
  margin: 5px;
  display: flex;
}
</style>